<template>

  <div>

    <h1>职位列表：</h1>

    <ul>

      <li

      v-for="item in list"
      :key="item.id">
     <p>职位 {{item.name}}</p>
     <p>工资{{item.monkey}} </p>
      </li>

    </ul>

    <hr />

    <h1>工资大于1W的职位：</h1>

    <ul>

      <li>
        {{higOffer}}
      </li>

    </ul>

  </div>
</template>

<script>
import { ref, computed } from '@vue/reactivity'
export default {
  setup () {
    /**
     * 需求：
     * 1. 展示职位信息=》定义一个列表数据
     * 2. 计算职位工资大于1e4,展示到另外一个列表
     */
    // 全部职位数据
    const list = ref([
      { id: 0, name: '前端开发-阿里', monkey: 8e3 },
      { id: 1, name: '前端开发-字节', monkey: 2e4 },
      { id: 2, name: '前端开发-百度', monkey: 2e5 }
    ])
    // 计算得到：工资大于1w的职位
    const higOffer = computed(() => {
      return list.value.filter(item => item.monkey > 1e4)
    })
    return { list, higOffer }
  }
}
</script>

<style lang="scss" scoped>
</style>
